<template>
    <div class="demo-div">

        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="220px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-tabs>
                <el-tab-pane label="基本信息">
                    <el-form-item label="商家名称" prop="storeName">
                        <el-input v-model="ruleForm.storeName" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="商家简介" prop="storeInfo">
                        <el-input v-model="ruleForm.storeInfo" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="商家分类" prop="storeType">
                        <el-select v-model="ruleForm.storeType" placeholder="请选择" multiple>
                            <el-option :label="item.name" :value="item.name" v-for="(item, index) in classification"
                                :key="index" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商家LOGO" prop="logo">
                        <Upload :row="ruleForm.logo" @OK="OKdata"></Upload>
                    </el-form-item>
                    <el-form-item label="商家背景图" prop="storeBackground">
                        <Uploads :row="ruleForm.storeBackground" @OK="OKdata1" @removeImg="removeImg1"></Uploads>
                    </el-form-item>
                    <el-form-item label="商家资质" prop="storeAp">
                        <Uploads :row="ruleForm.storeAp" @OK="OKdata2" @removeImg="removeImg2"></Uploads>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="联系商家">
                    <el-form-item label="联系人">
                        <el-input v-model="ruleForm.contacts" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="联系电话" prop="phone">
                        <el-input v-model="ruleForm.phone" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                        <el-input v-model="ruleForm.address" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="关联用户" prop="userId">
                        <el-select v-model="ruleForm.userId" placeholder="请选择">
                            <el-option :label="item.nickName" :value="item.id" v-for="(item, index) in roles"
                                :key="index" />
                        </el-select>
                    </el-form-item>
                </el-tab-pane>
                <!-- <el-tab-pane label="结算费率">
                    <el-form-item label="商家结算费率">
                        <el-input v-model="ruleForm.storeRate" placeholder="请输入" />
                        <span>注释:佣金结算费率（%）</span>
                    </el-form-item>
                    <el-form-item label="银行分类">
                        <el-select v-model="ruleForm.bankType" placeholder="请选择">
                            <el-option label="中国农业银行" value="中国农业银行" />
                            <el-option label="中国建设银行" value="中国建设银行" />
                            <el-option label="中国工商银行" value="中国工商银行" />
                            <el-option label="中国银行" value="中国银行" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="银行卡号">
                        <el-input v-model="ruleForm.bankNum" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="持卡人姓名">
                        <el-input v-model="ruleForm.bankName" placeholder="请输入" />
                    </el-form-item>
                </el-tab-pane> -->
            </el-tabs>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { AddMerchantCenter, updateMerchantCenter, selectName, getRelatedUser } from '@/api/merchantManagement.js'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import Upload from '@/components/elUpload/index.vue'
import Uploads from '@/components/elUploads/index.vue'
const props = defineProps({
    isAdd: {
        type: Boolean,
        default: false, // 默认值为 false
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
const emit = defineEmits(['closeAdd', 'closeOK'])


const formSize = ref('default')
const ruleFormRef = ref()

const ruleForm = reactive({
    // 商家名称
    storeName: '',
    // 商家简介
    storeInfo: '',
    // 商家分类
    storeType: [],
    // 商家LOGO
    logo: '',
    // 商家背景图
    storeBackground: [],
    // 商家资质
    storeAp: [],
    // 联系人
    contacts: '',
    // 联系电话
    phone: '',
    // 地址
    address: '',
    // 商家结算费率
    // storeRate: 0,
    // 银行分类
    // bankType: '中国银行',
    // 银行卡号
    // bankNum: '',
    // 持卡人姓名
    // bankName: '',
    // 角色名称
    userId: '',
})

const roles = reactive([])
const classification = reactive([])
const rules = reactive({
    storeName: [
        { required: true, message: '请输入', trigger: 'blur' },
        { min: 1, max: 20, message: '长度在20个字以内', trigger: 'blur' },
    ],
    storeInfo: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    storeType: [
        { required: true, message: '请输入', trigger: 'change' },
    ],
    phone: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    address: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    userId: [
        { required: true, message: '请输入', trigger: 'change' },
    ],
    storeAp: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    logo: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    storeBackground: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
})

// 确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.isAdd) {
                AddMerchantCenter(ruleForm).then(res => {
                    console.log(res, 2312);
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                    }
                })
            } else {
                updateMerchantCenter({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 关闭
const resetForm = () => {
    emit('closeAdd')
}
// 获取商品分类
const getselectName = () => {
    classification.length = 0
    selectName().then(res => {
        if (res.code == 200) {
            classification.push(...res.data)
        }
    })
}
const getRolesData = () => {
    let num = '0'
    if (props.isAdd) {
        num = '1'
    } else {
        num = '2'
    }
    roles.length = 0
    getRelatedUser(num).then(res => {
        if (res.code == 200) {
            roles.push(...res.data)
        }
    })
}

// 文件上传确认商家LOGO
const OKdata = (url) => {
    ruleForm.logo = url;
}

// 图片上传
const OKdata1 = (url) => {
    ruleForm.storeBackground.push(...url)
}
// 图片-删除
const removeImg1 = (item) => {
    ruleForm.storeBackground = item

}

// 图片上传
const OKdata2 = (url) => {
    ruleForm.storeAp.push(...url)
}
// 图片-删除
const removeImg2 = (item) => {
    ruleForm.storeAp = item

}


onMounted(() => {
    getRolesData()
    getselectName()
    if (!props.isAdd) {
        ruleForm.storeName = props.row.storeName;
        ruleForm.storeInfo = props.row.storeInfo;
        ruleForm.storeType = props.row.storeType;
        ruleForm.logo = props.row.logo;
        ruleForm.storeBackground = props.row.storeBackground;
        ruleForm.storeAp = props.row.storeAp;
        ruleForm.contacts = props.row.contacts;
        ruleForm.phone = props.row.phone;
        // ruleForm.storeRate = props.row.storeRate;
        // ruleForm.bankType = props.row.bankType;
        // ruleForm.bankNum = props.row.bankNum;
        // ruleForm.bankName = props.row.bankName;
        ruleForm.userId = props.row.userId;
        ruleForm.password = props.row.password;
        ruleForm.account = props.row.account;
        ruleForm.address = props.row.address;
    }
})

</script>

<style lang="scss" scoped>
.demo-div {
    p {
        margin: 0;
    }
}
</style>